<html>

<head>
  <meta charset="utf-8" />
  <script type="text/javascript" src="dependencies/jquery.js"></script>
  <script type="text/javascript" src="dependencies/jsonToTable.js"></script>
  <script type="text/javascript" src="dependencies/coursePath.js"></script>
  <script>var param = document.URL.slice(document.URL.search('\\?'));</script>
  <script type="text/javascript">
    // table head desciption: match with dept/course/instructor/other/Indices
    var tableHeadDesc = ["学院", "课程号", "课序号", "课程名", "授课教师", "上课地点"];

    var deptIndices = ["kkxsjc"];
    var courseIndices = ["kch", "kxh", "kcm"];
    var instructorIndices = ["skjs"];
    var otherIndices = ["xqm", "jxlm", "jasm"];

    var indices = [deptIndices, courseIndices, instructorIndices, otherIndices];
    var indicesFlat = indices.flat();

    // query with api
    function submitApi() {
      console.log("submit with api");
      var url = "http://47.108.67.131/timetable_api/v1/courses?" + $("#course_form").serialize();
      console.log(url);
      $.getJSON(url, function (json) {
        // console.log(json);
        var table = jsonToTable(json, tableHeadDesc, indicesFlat);
        // console.log(table);
        $("#result").html(table);
        console.log("table updated");
        $("tr:odd").css("background-color", "rgba(54, 146, 199, 0.2)");
        $("tr:even").css("background-color", "rgba(128, 128, 128, 0.2)");
      });
    }

    // query with local json
    function submitLocal() {
      console.log("submit with local json");
      var l = $("#course_form").serializeArray();
      var url = coursePath.get(l[0].value);
      // console.log(url);
      $.getJSON(url, function (json) {
        // console.log(json);
        var searchItems = [l[0].value, l[1].value, l[2].value, ''];
        // console.log(searchItems);
        var table = jsonToTableWithSearch(json, tableHeadDesc, indices, searchItems);
        // console.log(table);
        $("#result").html(table);
        console.log("table updated");
        console.log("ready");
        $("tr:odd").css("background-color", "rgba(54, 146, 199, 0.2)");
        $("tr:even").css("background-color", "rgba(128, 128, 128, 0.2)");
      });
    }


    // choose by user selection
    function sub() {
      // get query-method radio button value
      var val = $("input[name=method]:checked").val();
      if (val == "network") submitApi();
      if (val == "local") submitLocal();
      return false;
    }
  </script>

  <style>
    .queryblock {
      width: 30vh;
      display: inline-block;
      margin-bottom: 1em;
    }
  </style>

</head>

<body>
  <div style="padding-bottom: 1em;">
    <h2 style="display:inline"> 开课信息查询 </h2>
    <button id='ret'>返回</button>
  </div>

  <!-- query method: network / local json -->
  <form id="query-method">
    查询方式:<br>
    <input type="radio" name="method" value="network" checked>网络 API
    <br>
    <input type="radio" name="method" value="local">本地 JSON (<a id='depts'
      href="javascript: window.location.href = 'local/depts.html' + param;">支持哪些学院?</a>)
    <br>
  </form>

  <!-- query parameters: department, course name, instructor name -->
  <form id='course_form' onsubmit="return sub();">
    <div>
      <span class='queryblock'>
        学院:<br>
        <input type="text" name="department"><br>
      </span>
      <span class='queryblock'>
        课程:<br>
        <input type="text" name="course_name"><br>
      </span>
      <span class='queryblock'>
        老师:<br>
        <input type="text" name="instructor_name"><br>
      </span>
    </div>
    <input type="submit"></button>
  </form>


  <div>查询结果:</div>
  <div id="result"></div>

  <!-- init json -->
  <script>
    console.log("init");
    $("#ret").click(function () {
      window.location.href = "mainpage.html" + param;
    });

    // $.getJSON("local/course_cs.json", function (json) {
    //   // console.log(json);
    //   $("#result").html(jsonToTable(json, tableHeadDesc, indicesFlat));
    // });

    // $("tr:odd").css("background-color", "rgba(54, 146, 199, 0.2)");
    // $("tr:even").css("background-color", "rgba(128, 128, 128, 0.2)");
  </script>


</body>

</html>